<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>修改密码</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all" />
	<script th:src="@{/resources/js/jquery-3.3.1.min.js}"></script>
</head>
<style>
	.weak,
	.middle,
	.strong {
		height: 15px;
		width: 30px;
		border: 1px solid black;
		background: rgb(238, 238, 238);

	}

	.middle {
		border-left: 0;
		border-right: 0;
	}

	.result {
		width: 30px;
		height: 15px;
		font-size: 14px;
		line-height: 14px;
		text-align: center;
		margin-left: 10px;
	}
</style>
<body class="childrenBody">
<form class="layui-form layui-row changePwd" method="post" id="formChange" lay-filter="formChange">
	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
		<div class="layui-input-block layui-red pwdTips">旧密码请输入“123456”，新密码必须两次输入一致才能提交</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" value="" id="name" th:value="${session.username}" disabled  class="layui-input layui-disabled" autocomplete="false">
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">旧密码</label>
				<div class="layui-input-block">
					<input type="password" value="" id="oldPassword" placeholder="请输入旧密码" lay-verify="required" class="layui-input pwd" autocomplete="false">
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">新密码</label>
				<div class="layui-input-block">
					<input type="password" oninput="passValidate(this)" value="" id="newPwdOne" placeholder="请输入新密码" lay-verify="required|newPwd"  class="layui-input pwd" autocomplete="false">
				</div>
			</div>
			<div class="layui-inline">
				<ul class="pwdStrength" style="width: 80%;list-style: none;height: 30px;display: none;flex: 1;">
					<li class="weak"></li>
					<li class="middle"></li>
					<li class="strong"></li>
					<li class="result"></li>
				</ul>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">确认密码</label>
				<div class="layui-input-block">
					<input type="password" value="" id="newPwdTwo" placeholder="请确认密码" lay-verify="required|confirmPwd" class="layui-input pwd" autocomplete="false">
				</div>

			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="changePwd">立即修改</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</div>
</form>
<script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/resources/page/user/user.js}"></script>

<script type="text/javascript">
	var ctx = [[@{/}]]
	var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
	//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
	var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
	var enoughRegex = new RegExp("(?=.{6,}).*", "g");

	layui.use(['jquery','form','layer'],function () {
		var $ = layui.jquery;
		var form = layui.form;
		var layer = layui.layer;


		form.on("submit(changePwd)",function () {
		    var name = $("#name").val();
            var oldPassword = $("#oldPassword").val();
            var newPwdOne = $("#newPwdOne").val();
            var newPwdTwo = $("#newPwdTwo").val();
            layer.confirm('你确定要修改【' + name + '】这个用户的密吗？', {icon: 3, title: '提示'}, function (index) {
				$.post(ctx + '/user/changePassword',{oldPassword:oldPassword,newPassword:newPwdOne,confirmPassword:newPwdTwo},function (res) {
					layer.msg(res.msg + ",请重新登陆！");
					setTimeout(function () {
						parent.location.reload()
					},1500);
				});
				layer.close(index);

            });
			//;
        	return false;
		});

    });
	//密码强度验证
	function passValidate(e) {
		var pwd = $.trim(e.value);
		if (pwd === '') {
			$('.pwdStrength').css({'display':'none'})
			$('.weak').css({
				'background': 'rgb(238, 238, 238)'
			});
			$('.middle').css({
				'background': 'rgb(238, 238, 238)'
			});
			$('.strong').css({
				'background': 'rgb(238, 238, 238)'
			});
			$('.result').text('')
		} else {
			$('.pwdStrength').css({'display':'flex'})
			//密码为八位及以上并且字母数字特殊字符三项都包括
			var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
			//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
			var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
			var enoughRegex = new RegExp("(?=.{6,}).*", "g");
			if (false == enoughRegex.test(pwd)) {
			} else if (strongRegex.test(pwd)) {
				$('.strong').css({
					'background': '#33ff33'
				});
				$('.result').text('强')
			} else if (mediumRegex.test(pwd)) {

				$('.middle').css({
					'background': '#FFC125'
				});
				$('.strong').css({
					'background': 'rgb(238, 238, 238)'
				});
				$('.result').text('中')
			} else {

				$('.weak').css({
					'background': '#EE4000'
				});
				$('.middle').css({
					'background': 'rgb(238, 238, 238)'
				});
				$('.strong').css({
					'background': 'rgb(238, 238, 238)'
				});
				$('.result').text('弱')
			}
		}
	}
</script>

</body>
</html>